<template>
  <div class="demandboard">
    <!-- 需求看板 -->
    <div class="title">
      <div class="des">
        <img :src="logo" alt="" />
        <div class="text">
          <p>{{ projectName }}</p>
          <span v-if="type === 1">瀑布式协作项目</span>
          <span v-else>软件敏捷开发项目</span>
        </div>
        <div
          class="level"
          :class="
            level <= 100
              ? 'LvOne'
              : level > 100 && level <= 200
              ? 'LvTwo'
              : 'LvThree'
          "
        >
          lv{{ level }}
        </div>
      </div>
    </div>
    <div class="board">
      <div class="left">
        <div class="demandpool item">
          <!-- 需求池列表 -->
          <div class="smtitle">需求池({{ list1.length }})</div>
          <draggable
            class="list-group1"
            tag="ul"
            v-model="list1"
            v-bind="{
              animation: 150,
              group: {
                name: 'description',
                scroll: true,
              },
              ghostClass: 'ghost',
            }"
            @end="onEnd($event)"
          >
            <li v-for="(item, key) in list1" :key="key">
              <div class="areaone">
                <div class="des1">
                  <span class="span1" @click="goin(item.taskId)">{{
                    item.taskName
                  }}</span>
                  <span
                    :class="
                      item.priority <= 100
                        ? 'span2'
                        : item.priority > 100 && item.priority <= 200
                        ? 'span3'
                        : 'span4'
                    "
                    >lv{{ item.priority }}</span
                  >
                </div>
                <div class="des2">
                  <section>
                    <!-- <img :src="item.chargeUrl" alt="" /> -->
                    <span>负责人：</span>
                    <span>{{ item.chargeName }}</span>
                  </section>
                  <p class="notstart" v-if="item.status === 1">未开始</p>
                  <p class="completed" v-else-if="item.status === 3">已完成</p>
                  <p class="ongoing" v-else>进行中</p>
                </div>
                <div class="des3">
                  <i>模块：{{ item.projectModuleName }}</i>
                  <div
                    class="morebtn"
                    title="添加子任务"
                    @click="newTask(item)"
                  ></div>
                </div>
              </div>
              <div class="areaone1 areaone11" v-if="item.secondLevel && item.secondLevel.length > 0">
                <div class="des1">
                  <span class="tasksBox">二级任务</span>
                </div>
                <div
                  class="des2"
                  v-for="(item1, index) in item.secondLevel"
                  :key="index"
                >
                  <div class="taskBox">
                    <span class="taskTop taskTop1" v-if="item1.type === 1"
                      >任务</span
                    >
                    <span class="taskTop taskTop2" v-if="item1.type === 2"
                      >需求</span
                    >
                    <span class="taskTop taskTop3" v-if="item1.type === 3"
                      >缺陷</span
                    >
                    <span class="taskTop taskTop4" v-if="item1.type === 4"
                      >测试</span
                    >
                    <span class="taskTitle" @click="goin(item1.taskId)">{{
                      item1.taskName
                    }}</span>
                    <span class="taskProgress"
                      >进度：{{
                        item1.taskProgress ? item1.taskProgress : 0
                      }}%</span
                    >
                  </div>
                </div>
              </div>
              <div class="areaone1" v-if="item.thirdLevel && item.thirdLevel.length > 0">
                <div class="des1">
                  <span class="tasksBox tasksBox1">三级任务</span>
                </div>
                <div
                  class="des2"
                  v-for="(item1, index) in item.thirdLevel"
                  :key="index"
                >
                  <div class="taskBox">
                    <span class="taskTop taskTop1" v-if="item1.type === 1"
                      >任务</span
                    >
                    <span class="taskTop taskTop2" v-if="item1.type === 2"
                      >需求</span
                    >
                    <span class="taskTop taskTop3" v-if="item1.type === 3"
                      >缺陷</span
                    >
                    <span class="taskTop taskTop4" v-if="item1.type === 4"
                      >测试</span
                    >
                    <span class="taskTitle" @click="goin(item1.taskId)">{{
                      item1.taskName
                    }}</span>
                    <span class="taskProgress"
                      >进度：{{
                        item1.taskProgress ? item1.taskProgress : 0
                      }}%</span
                    >
                  </div>
                </div>
              </div>
            </li>
          </draggable>
        </div>
        <div class="research item">
          <!-- 待研发列表  -->
          <div class="smtitle">待研发({{ list2.length }})</div>
          <draggable
            class="list-group2"
            tag="ul"
            v-model="list2"
            v-bind="{
              animation: 150,
              group: {
                name: 'description',
                scroll: true,
              },
              ghostClass: 'ghost',
            }"
            @end="onEnd($event)"
          >
            <li v-for="(item, key) in list2" :key="key">
              <div class="areaone">
                <div class="des1">
                  <span class="span1" @click="goin(item.taskId)">{{
                    item.taskName
                  }}</span>
                  <span
                    :class="
                      item.priority <= 100
                        ? 'span2'
                        : item.priority > 100 && item.priority <= 200
                        ? 'span3'
                        : 'span4'
                    "
                    >lv{{ item.priority }}</span
                  >
                </div>
                <div class="des2">
                  <section>
                    <!-- <img :src="item.chargeUrl" alt="" /> -->
                    <span>负责人：</span>
                    <span>{{ item.chargeName }}</span>
                  </section>
                  <p class="notstart" v-if="item.status === 1">未开始</p>
                  <p class="completed" v-else-if="item.status === 3">已完成</p>
                  <p class="ongoing" v-else>进行中</p>
                </div>
                <div class="des3">
                  <i>模块：{{ item.projectModuleName }}</i>
                  <div
                    class="morebtn"
                    title="添加子任务"
                    @click="newTask(item)"
                  ></div>
                </div>
              </div>
              <div class="areaone1 areaone11" v-if="item.secondLevel && item.secondLevel.length > 0">
                <div class="des1">
                  <span class="tasksBox">二级任务</span>
                </div>
                <div
                  class="des2"
                  v-for="(item1, index) in item.secondLevel"
                  :key="index"
                >
                  <div class="taskBox">
                    <span class="taskTop taskTop1" v-if="item1.type === 1"
                      >任务</span
                    >
                    <span class="taskTop taskTop2" v-if="item1.type === 2"
                      >需求</span
                    >
                    <span class="taskTop taskTop3" v-if="item1.type === 3"
                      >缺陷</span
                    >
                    <span class="taskTop taskTop4" v-if="item1.type === 4"
                      >测试</span
                    >
                    <span class="taskTitle" @click="goin(item1.taskId)">{{
                      item1.taskName
                    }}</span>
                    <span class="taskProgress"
                      >进度：{{
                        item1.taskProgress ? item1.taskProgress : 0
                      }}%</span
                    >
                  </div>
                </div>
              </div>
              <div class="areaone1" v-if="item.thirdLevel && item.thirdLevel.length > 0">
                <div class="des1">
                  <span class="tasksBox tasksBox1">三级任务</span>
                </div>
                <div
                  class="des2"
                  v-for="(item1, index) in item.thirdLevel"
                  :key="index"
                >
                  <div class="taskBox">
                    <span class="taskTop taskTop1" v-if="item1.type === 1"
                      >任务</span
                    >
                    <span class="taskTop taskTop2" v-if="item1.type === 2"
                      >需求</span
                    >
                    <span class="taskTop taskTop3" v-if="item1.type === 3"
                      >缺陷</span
                    >
                    <span class="taskTop taskTop4" v-if="item1.type === 4"
                      >测试</span
                    >
                    <span class="taskTitle" @click="goin(item1.taskId)">{{
                      item1.taskName
                    }}</span>
                    <span class="taskProgress"
                      >进度：{{
                        item1.taskProgress ? item1.taskProgress : 0
                      }}%</span
                    >
                  </div>
                </div>
              </div>
            </li>
          </draggable>
        </div>
        <div class="researching item">
          <!-- 研发中列表  -->

          <div class="smtitle spe1">研发中({{ list3.length }})</div>
          <draggable
            class="list-group3"
            tag="ul"
            v-model="list3"
            v-bind="{
              animation: 150,
              group: {
                name: 'description',
                scroll: true,
              },
              ghostClass: 'ghost',
            }"
            @end="onEnd($event)"
          >
            <li v-for="(item, key) in list3" :key="key">
              <div class="areaone">
                <div class="des1">
                  <span class="span1" @click="goin(item.taskId)">{{
                    item.taskName
                  }}</span>
                  <span
                    :class="
                      item.priority <= 100
                        ? 'span2'
                        : item.priority > 100 && item.priority <= 200
                        ? 'span3'
                        : 'span4'
                    "
                    >lv{{ item.priority }}</span
                  >
                </div>
                <div class="des2">
                  <section>
                    <!-- <img :src="item.chargeUrl" alt="" /> -->
                    <span>负责人：</span>
                    <span>{{ item.chargeName }}</span>
                  </section>
                  <p class="notstart" v-if="item.status === 1">未开始</p>
                  <p class="completed" v-else-if="item.status === 3">已完成</p>
                  <p class="ongoing" v-else>进行中</p>
                </div>
                <div class="des3">
                  <i>模块：{{ item.projectModuleName }}</i>
                  <div
                    class="morebtn"
                    title="添加子任务"
                    @click="newTask(item)"
                  ></div>
                </div>
              </div>
              <div class="areaone1 areaone11" v-if="item.secondLevel && item.secondLevel.length > 0">
                <div class="des1">
                  <span class="tasksBox">二级任务</span>
                </div>
                <div
                  class="des2"
                  v-for="(item1, index) in item.secondLevel"
                  :key="index"
                >
                  <div class="taskBox">
                    <span class="taskTop taskTop1" v-if="item1.type === 1"
                      >任务</span
                    >
                    <span class="taskTop taskTop2" v-if="item1.type === 2"
                      >需求</span
                    >
                    <span class="taskTop taskTop3" v-if="item1.type === 3"
                      >缺陷</span
                    >
                    <span class="taskTop taskTop4" v-if="item1.type === 4"
                      >测试</span
                    >
                    <span class="taskTitle" @click="goin(item1.taskId)">{{
                      item1.taskName
                    }}</span>
                    <span class="taskProgress"
                      >进度：{{
                        item1.taskProgress ? item1.taskProgress : 0
                      }}%</span
                    >
                  </div>
                </div>
              </div>
              <div class="areaone1" v-if="item.thirdLevel && item.thirdLevel.length > 0">
                <div class="des1">
                  <span class="tasksBox tasksBox1">三级任务</span>
                </div>
                <div
                  class="des2"
                  v-for="(item1, index) in item.thirdLevel"
                  :key="index"
                >
                  <div class="taskBox">
                    <span class="taskTop taskTop1" v-if="item1.type === 1"
                      >任务</span
                    >
                    <span class="taskTop taskTop2" v-if="item1.type === 2"
                      >需求</span
                    >
                    <span class="taskTop taskTop3" v-if="item1.type === 3"
                      >缺陷</span
                    >
                    <span class="taskTop taskTop4" v-if="item1.type === 4"
                      >测试</span
                    >
                    <span class="taskTitle" @click="goin(item1.taskId)">{{
                      item1.taskName
                    }}</span>
                    <span class="taskProgress"
                      >进度：{{
                        item1.taskProgress ? item1.taskProgress : 0
                      }}%</span
                    >
                  </div>
                </div>
              </div>
            </li>
          </draggable>
        </div>
      </div>
      <div class="right">
        <!-- 测试列表  -->

        <div class="test item">
          <div class="smtitle spe2">待测试({{ list4.length }})</div>
          <draggable
            class="list-group4"
            tag="ul"
            v-model="list4"
            v-bind="{
              animation: 150,
              group: {
                name: 'description',
                scroll: true,
              },
              ghostClass: 'ghost',
            }"
            @end="onEnd($event)"
          >
            <li v-for="(item, key) in list4" :key="key">
              <div class="areaone">
                <div class="des1">
                  <span class="span1" @click="goin(item.taskId)">{{
                    item.taskName
                  }}</span>
                  <span
                    :class="
                      item.priority <= 100
                        ? 'span2'
                        : item.priority > 100 && item.priority <= 200
                        ? 'span3'
                        : 'span4'
                    "
                    >lv{{ item.priority }}</span
                  >
                </div>
                <div class="des2">
                  <section>
                    <!-- <img :src="item.chargeUrl" alt="" /> -->
                    <span>负责人：</span>
                    <span>{{ item.chargeName }}</span>
                  </section>
                  <p class="notstart" v-if="item.status === 1">未开始</p>
                  <p class="completed" v-else-if="item.status === 3">已完成</p>
                  <p class="ongoing" v-else>进行中</p>
                </div>
                <div class="des3">
                  <i>模块：{{ item.projectModuleName }}</i>
                  <div
                    class="morebtn"
                    title="添加子任务"
                    @click="newTask(item)"
                  ></div>
                </div>
              </div>
              <div class="areaone1 areaone11" v-if="item.secondLevel && item.secondLevel.length > 0">
                <div class="des1">
                  <span class="tasksBox">二级任务</span>
                </div>
                <div
                  class="des2"
                  v-for="(item1, index) in item.secondLevel"
                  :key="index"
                >
                  <div class="taskBox">
                    <span class="taskTop taskTop1" v-if="item1.type === 1"
                      >任务</span
                    >
                    <span class="taskTop taskTop2" v-if="item1.type === 2"
                      >需求</span
                    >
                    <span class="taskTop taskTop3" v-if="item1.type === 3"
                      >缺陷</span
                    >
                    <span class="taskTop taskTop4" v-if="item1.type === 4"
                      >测试</span
                    >
                    <span class="taskTitle" @click="goin(item1.taskId)">{{
                      item1.taskName
                    }}</span>
                    <span class="taskProgress"
                      >进度：{{
                        item1.taskProgress ? item1.taskProgress : 0
                      }}%</span
                    >
                  </div>
                </div>
              </div>
              <div class="areaone1" v-if="item.thirdLevel && item.thirdLevel.length > 0">
                <div class="des1">
                  <span class="tasksBox tasksBox1">三级任务</span>
                </div>
                <div
                  class="des2"
                  v-for="(item1, index) in item.thirdLevel"
                  :key="index"
                >
                  <div class="taskBox">
                    <span class="taskTop taskTop1" v-if="item1.type === 1"
                      >任务</span
                    >
                    <span class="taskTop taskTop2" v-if="item1.type === 2"
                      >需求</span
                    >
                    <span class="taskTop taskTop3" v-if="item1.type === 3"
                      >缺陷</span
                    >
                    <span class="taskTop taskTop4" v-if="item1.type === 4"
                      >测试</span
                    >
                    <span class="taskTitle" @click="goin(item1.taskId)">{{
                      item1.taskName
                    }}</span>
                    <span class="taskProgress"
                      >进度：{{
                        item1.taskProgress ? item1.taskProgress : 0
                      }}%</span
                    >
                  </div>
                </div>
              </div>
            </li>
          </draggable>
        </div>
        <!-- 发布列表  -->

        <div class="release item">
          <div class="smtitle">发布({{ list5.length }})</div>
          <draggable
            class="list-group5"
            tag="ul"
            v-model="list5"
            v-bind="{
              animation: 150,
              group: {
                name: 'description',
                scroll: true,
              },
              ghostClass: 'ghost',
            }"
            @end="onEnd($event)"
          >
            <li v-for="(item, key) in list5" :key="key">
              <div class="areaone">
                <div class="des1">
                  <span class="span1" @click="goin(item.taskId)">{{
                    item.taskName
                  }}</span>
                  <span
                    :class="
                      item.priority <= 100
                        ? 'span2'
                        : item.priority > 100 && item.priority <= 200
                        ? 'span3'
                        : 'span4'
                    "
                    >lv{{ item.priority }}</span
                  >
                </div>
                <div class="des2">
                  <section>
                    <!-- <img :src="item.chargeUrl" alt="" /> -->
                    <span>负责人：</span>
                    <span>{{ item.chargeName }}</span>
                  </section>
                  <p class="notstart" v-if="item.status === 1">未开始</p>
                  <p class="completed" v-else-if="item.status === 3">已完成</p>
                  <p class="ongoing" v-else>进行中</p>
                </div>
                <div class="des3">
                  <i>模块：{{ item.projectModuleName }}</i>
                  <div
                    class="morebtn"
                    title="添加子任务"
                    @click="newTask(item)"
                  ></div>
                </div>
              </div>
              <div class="areaone1 areaone11" v-if="item.secondLevel && item.secondLevel.length > 0">
                <div class="des1">
                  <span class="tasksBox">二级任务</span>
                </div>
                <div
                  class="des2"
                  v-for="(item1, index) in item.secondLevel"
                  :key="index"
                >
                  <div class="taskBox">
                    <span class="taskTop taskTop1" v-if="item1.type === 1"
                      >任务</span
                    >
                    <span class="taskTop taskTop2" v-if="item1.type === 2"
                      >需求</span
                    >
                    <span class="taskTop taskTop3" v-if="item1.type === 3"
                      >缺陷</span
                    >
                    <span class="taskTop taskTop4" v-if="item1.type === 4"
                      >测试</span
                    >
                    <span class="taskTitle" @click="goin(item1.taskId)">{{
                      item1.taskName
                    }}</span>
                    <span class="taskProgress"
                      >进度：{{
                        item1.taskProgress ? item1.taskProgress : 0
                      }}%</span
                    >
                  </div>
                </div>
              </div>
              <div class="areaone1" v-if="item.thirdLevel && item.thirdLevel.length > 0">
                <div class="des1">
                  <span class="tasksBox tasksBox1">三级任务</span>
                </div>
                <div
                  class="des2"
                  v-for="(item1, index) in item.thirdLevel"
                  :key="index"
                >
                  <div class="taskBox">
                    <span class="taskTop taskTop1" v-if="item1.type === 1"
                      >任务</span
                    >
                    <span class="taskTop taskTop2" v-if="item1.type === 2"
                      >需求</span
                    >
                    <span class="taskTop taskTop3" v-if="item1.type === 3"
                      >缺陷</span
                    >
                    <span class="taskTop taskTop4" v-if="item1.type === 4"
                      >测试</span
                    >
                    <span class="taskTitle" @click="goin(item1.taskId)">{{
                      item1.taskName
                    }}</span>
                    <span class="taskProgress"
                      >进度：{{
                        item1.taskProgress ? item1.taskProgress : 0
                      }}%</span
                    >
                  </div>
                </div>
              </div>
            </li>
          </draggable>
        </div>
      </div>
    </div>
    <CreateTask ref="child" @getTaskList="init"></CreateTask>
  </div>
</template>

<script>
import { getdemand, modifyStatus } from '@/api/project/demandBorad';
import { getprodetail } from '@/api/project/prodetail';
import CreateTask from './CreateTask.vue';

import draggable from 'vuedraggable';
export default {
  name: 'demandboard',
  components: {
    // 调用组件
    draggable,
    CreateTask
  },
  data() {
    return {
      logo: '',
      projectName: '',
      type: '',
      level: '',
      // 初始化任务状态
      status: Number,
      // 初始化任务id
      taskId: Number,
      oldleftlist: [],
      list1: [],
      list2: [],
      list3: [],
      list4: [],
      list5: []
    };
  },
  computed: {

  },
  mounted() {
    this.init();
  },
  methods: {
    // 初始化页面
    init() {
      // 获取列表
      getdemand(Number(localStorage.getItem('projectId'))).then(res => {
        // console.log('sda', res);
        this.list1 = res.data.a1;
        this.list2 = res.data.a2;
        this.list3 = res.data.a3;
        this.list4 = res.data.a4;
        this.list5 = res.data.a5;
      });
      // 获取项目详情
      getprodetail(Number(localStorage.getItem('projectId')), Number(sessionStorage.getItem('usertype'))).then(res => {
        // console.log(res);
        this.logo = res.data.logo;
        this.projectName = res.data.name;
        this.type = res.data.type;
        this.level = res.data.level;
      });
    },
    // 跳转新建任务页面
    newtask(item) {
      // console.log(item);
      this.$router.push({
        name: 'Task',
        params: {
          index: 1,
          currentView: 'second',
          projectid: item.projectId,
          parentid: item.taskId
        }
      });
    },
    // 新建子任务
    newTask(item) {
      // console.log('新建任务');
      this.$refs.child.openNewTask(item.projectId, item.taskId);
    },
    // 子任务跳转到任务概况页面
    goin(id) {
      this.$router.push({
        name: 'Misinfo&intro',
        params: {
          index: 0,
          currentView: 'info'
        }
      });
      localStorage.setItem('taskId', id);
    },
    // 移动修改状态
    changeStatus(statusId, taskId) {
      modifyStatus(statusId, taskId).then(res => {
        // console.log(res);
        if (res.code === 200) {
          this.$message({
            showClose: true,
            type: 'success',
            message: '移动成功'
          });
        } else {
          this.$message({
            showClose: true,
            type: 'warning',
            message: '移动失败'
          });
        }
      });
    },
    // onMove({ relatedContext, draggedContext }) {
    //   const relatedElement = relatedContext.element;
    //   const draggedElement = draggedContext.element;
    //   console.log('移动中');
    //   return ((!relatedElement || !relatedElement.fixed) && !draggedElement.fixed);
    // },
    onEnd(e) {
      // const relatedElement = relatedContext.element;
      // const draggedElement = draggedContext.element;
      // console.log('拖动结束', e.to.__vue__._props.value);
      // console.log('拖动结束', e.from.className, e.to.className);
      // console.log('拖动结束', e.newIndex);
      // console.log('拖动结束1', e.to.__vue__._props.value[e.newIndex]);
      // 拖动任务的ID
      this.taskId = e.to.__vue__._props.value[e.newIndex].taskId;
      // 共5个数组，list-group1/list-group2/list-group3/list-group4/list-group5
      // 拖动前的数组
      // const from = e.from.className;
      // 拖动后的数组
      const to = e.to.className;
      if (to === 'list-group1') {
        this.status = 1;
        // console.log('status', this.status);
        // console.log('id', this.taskId);
      } else if (to === 'list-group2') {
        this.status = 2;
        // console.log('status', this.status);
        // console.log('id', this.taskId);
      } else if (to === 'list-group3') {
        this.status = 3;
        // console.log('status', this.status);
        // console.log('id', this.taskId);
      } else if (to === 'list-group4') {
        this.status = 4;
        // console.log('status', this.status);
        // console.log('id', this.taskId);
      } else if (to === 'list-group5') {
        this.status = 5;
        // console.log('status', this.status);
        // console.log('id', this.taskId);
      }
      // 发起请求，修改该任务的状态
      this.changeStatus(this.status, this.taskId);
      // return ((!relatedElement || !relatedElement.fixed) && !draggedElement.fixed);
    }
    // rightStart() {
    //   this.oldleftlist = this.list1.concat();
    //   this.isDragging = true;
    // },
    // rightEnd() {
    //   this.isDragging = false;
    //   // 左边数据不变
    //   this.listLeft = this.oldleftlist.concat();
    // }
  }

};
</script>

<style lang="less" scoped>
.demandboard {
  width: 1878px;
  height: 800px;
  background-color: #ffffff;
  box-shadow: 1px -2px 3px 0px rgba(153, 153, 153, 0.5),
    1px 2px 3px 0px rgba(153, 153, 153, 0.5);
  border-radius: 0 5px 5px 5px;
  margin-top: -4px;

  .title {
    width: 98%;
    height: 45px;
    margin: 0 auto;
    padding-top: 36px;
    margin-bottom: 38px;
    position: relative;

    .des {
      width: 440px;
      height: 45px;
      margin: 0 auto;
      display: flex;
      justify-content: center;
      .avatar {
        width: 41px;
        height: 41px;
        position: absolute;
        left: 20%;
        top: 15%;
      }
      img {
        width: 45px;
        height: 45px;
      }
      .text {
        margin-left: 20px;
        p {
          margin: 0;
          font-size: 16px;
          font-weight: 400;
          color: #222222;
          line-height: 28px;
        }
        span {
          font-size: 14px;

          font-weight: 400;
          color: #555555;
          line-height: 20px;
        }
      }
      .level {
        align-self: flex-start;
        text-align: center;
        font-size: 12px;
        font-family: SukhumvitSet-Bold, SukhumvitSet;
        font-weight: bold;
        color: #ffffff;
        line-height: 22px;
        width: 59px;
        height: 22px;
        background: #e8f8ec;
        border-radius: 9px;
        margin-top: 5px;
        margin-left: 20px;
      }
      .LvOne {
        background: #c5f5d1;
      }
      .LvTwo {
        background: #f7cbd2;
      }
      .LvThree {
        background: #cbd5f5;
      }
    }
  }
  .board {
    // width: 1840px;
    padding: 0 20px;
    box-sizing: border-box;
    width: 100%;
    height: 651px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    .smtitle {
      width: 100%;
      height: 54px;
      background: #f1f5ff;
      box-shadow: 0px 1px 2px 0px rgba(153, 153, 153, 0.5);
      border-radius: 12px 12px 0px 0px;
      font-size: 16px;
      font-family: PingFangSC-Regular, PingFang SC;
      color: #222222;
      line-height: 54px;
      text-align: center;
      margin-bottom: 10px;
    }
    .left {
      width: 1090px;
      height: 100%;
      display: flex;
      justify-content: space-between;
      border-right: 1px solid #d9e2f9;
      .item {
        width: 352px;
        height: 100%;
      }
      .spe1 {
        border-radius: 12px 0px 0px 0px;
      }
    }

    .right {
      width: 750px;
      height: 100%;
      display: flex;
      justify-content: space-between;
      .item {
        width: 366px;
        height: 100%;
      }
      .spe2 {
        border-radius: 0px 12px 0px 0px;
      }
    }

    ul {
      width: 335px;
      height: 588px;
      margin: 0 auto;
      overflow-y: scroll;
      li {
        width: 331px;
        min-height: 103px;
        box-shadow: 1px 2px 3px 0px rgba(153, 153, 153, 0.5);
        margin: 0 auto;
        margin-bottom: 20px;
        .areaone {
          width: 311px;
          // height: 114px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          margin: 10px;
          .des1 {
            width: 100%;
            height: 20px;
            margin-top: 5px;
            .span1 {
              cursor: pointer;
              float: left;
              font-size: 14px;
              font-weight: 400;
              color: #2fc0e0;
            }
            .span2 {
              text-align: center;
              font-size: 12px;
              font-family: SukhumvitSet-Bold, SukhumvitSet;
              font-weight: bold;
              color: #ffffff;
              line-height: 18px;
              width: 53px;
              height: 18px;
              background: #c5f5d1;
              border-radius: 9px;
              margin-top: 5px;
              float: right;
            }
            .span3 {
              text-align: center;
              font-size: 12px;
              font-family: SukhumvitSet-Bold, SukhumvitSet;
              font-weight: bold;
              color: #ffffff;
              line-height: 18px;
              width: 53px;
              height: 18px;
              background: #f7cbd2;
              border-radius: 9px;
              margin-top: 5px;
              float: right;
            }
            .span4 {
              text-align: center;
              font-size: 12px;
              font-family: SukhumvitSet-Bold, SukhumvitSet;
              font-weight: bold;
              color: #ffffff;
              line-height: 18px;
              width: 53px;
              height: 18px;
              background: #cbd5f5;
              border-radius: 9px;
              margin-top: 5px;
              float: right;
            }
          }
          .des2 {
            width: 100%;
            // height: 45px;
            height: 18px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 10px 0;
            section {
              width: 50%;
              height: 100%;
              display: flex;
              align-items: center;
              img {
                width: 40px;
                height: 40px;
                border-radius: 50%;
              }
              span {
                font-size: 12px;
                font-weight: 400;
                color: #555555;
                line-height: 45px;
                // margin-left: 14px;
              }
            }
            p {
              margin: 0;
              font-size: 14px;
              font-weight: 400;
            }
            .ongoing {
              color: #ffd167;
            }
            .ongoing::before {
              content: "";
              display: inline-block;
              width: 10px;
              height: 10px;
              border-radius: 50%;
              background: #ffd167;
              margin-right: 3px;
              box-shadow: 0 0 3px #ffd167;
            }
            .notstart {
              color: #555555;
            }
            .notstart::before {
              content: "";
              display: inline-block;
              width: 10px;
              height: 10px;
              border-radius: 50%;
              background: #555555;
              margin-right: 3px;
              box-shadow: 0 0 3px #555555;
            }
            .completed {
              color: #3ea528;
            }
            .completed::before {
              content: "";
              display: inline-block;
              width: 10px;
              height: 10px;
              border-radius: 50%;
              background: #3ea528;
              margin-right: 3px;
              box-shadow: 0 0 3px #3ea528;
            }
          }
          .des3 {
            width: 100%;
            height: 18px;
            display: flex;
            justify-content: space-between;
            i {
              font-size: 14px;
              font-style: normal;
              font-weight: 400;
              color: #555555;
            }
            .morebtn {
              width: 21px;
              height: 21px;
              cursor: pointer;
              vertical-align: text-bottom;
              background: url("~@/assets/addScoreList.png") no-repeat center
                center;
              background-size: 100% 100%;
            }
          }
          // .des {
          //   flex: 1;
          //   height: 100%;
          //   p {
          //     font-size: 16px;

          //     font-weight: 400;
          //     color: #222222;
          //     line-height: 16px;
          //     margin: 0;
          //     margin-bottom: 14px;
          //   }
          //   section {
          //     width: 100%;
          //     height: 44px;
          //     display: flex;
          //     justify-content: flex-start;
          //     align-items: center;
          //     img {
          //       width: 44px;
          //       height: 44px;
          //     }
          //     span {
          //       font-size: 14px;

          //       font-weight: 400;
          //       color: #222222;
          //       margin-left: 5px;
          //     }
          //   }

          //   i {
          //     display: block;
          //     margin-top: 10px;
          //     font-size: 14px;
          //     font-style: normal;

          //     font-weight: 400;
          //     color: #555555;
          //   }
          // }
          // .state {
          //   width: 58px;
          //   height: 100%;
          //   position: relative;
          //   span {
          //     display: inline-block;
          //     align-self: flex-start;
          //     text-align: center;
          //     font-size: 12px;
          //     font-family: SukhumvitSet-Bold, SukhumvitSet;
          //     font-weight: bold;
          //     color: #ffffff;
          //     line-height: 18px;
          //     width: 53px;
          //     height: 18px;
          //     background: #e8f8ec;
          //     border-radius: 9px;
          //     margin-top: 5px;
          //   }
          //   p {
          //     margin: 0;
          //     font-size: 14px;
          //     font-weight: 400;
          //     color: #3ea528;
          //   }
          //   p::before {
          //     content: "";
          //     display: inline-block;
          //     width: 10px;
          //     height: 10px;
          //     border-radius: 50%;

          //     background: #3ea528;
          //     margin-right: 5px;
          //     box-shadow: 0 0 3px #3ea528;
          //   }
          //   .morebtn {
          //     width: 21px;
          //     height: 21px;
          //     position: absolute;
          //     bottom: 0;
          //     right: 0;
          //     cursor: pointer;
          //     background: url("~@/assets/mbtnw.png") no-repeat center center;
          //     background-size: 100% 100%;
          //   }
          //   .morebtn:hover {
          //     background: url("~@/assets/mbtn.png") no-repeat center center;
          //     background-size: 100% 100%;
          //   }
          // }
        }
        .areaone1 {
          width: 311px;
          margin-top: 15px;
          margin-left: 10px;
          padding: 15px 0;
          border-top: 1px solid #f2f2f2;
          .des1 {
            .tasksBox {
              color: #333;
              font-size: 12px;
            }
            .tasksBox::before {
              position: relative;
              bottom: -3px;
              content: "";
              display: inline-block;
              width: 5px;
              height: 20px;
              background: linear-gradient(180deg, #1160cf 0%, #cd06bf 100%);
              border-radius: 3px;
              margin-right: 5px;
            }
            .tasksBox1::before {
              background: linear-gradient(180deg, #cd06bf 0%, #1160cf 100%);
            }
          }
          .des2 {
            .taskBox {
              .taskTop {
                display: inline-block;
                width: 34px;
                height: 17px;
                font-size: 12px;
                padding: 1.5px;
                border-radius: 2px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #ffffff;
                line-height: 17px;
              }
              .taskTop1 {
                background: #e7b2b2;
              }
              .taskTop2 {
                background: #cbeebc;
              }
              .taskTop3 {
                background: #de8fe0;
              }
              .taskTop4 {
                background: #9edacb;
              }
              .taskTitle {
                cursor: pointer;
                display: inline-block;
                width: 180px;
                height: 17px;
                font-size: 12px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #2fc0e0;
                line-height: 17px;
                white-space: nowrap; /*强制在一行显示*/
                text-overflow: ellipsis; /*设置超出内容显示...*/
                overflow: hidden; /*一定不能少 超出的内容进行隐藏*/
              }
              .taskProgress {
                display: inline-block;
                // width: 54px;
                height: 17px;
                font-size: 12px;
                font-family: PingFangSC-Semibold, PingFang SC;
                font-weight: 600;
                color: #6c59cd;
                line-height: 17px;
              }
            }
          }
        }
        .areaone11 {
          padding-bottom: 0;
        }
      }
    }
    ul::-webkit-scrollbar {
      display: none;
    }
  }
}
</style>
